<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-sys__menu">
      <el-form :inline="true" :model="dataForm"  @keydown.enter.native.prevent="getDataList()">
        <el-form-item>
          <el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>
        </el-form-item>
      </el-form>
    
      <el-table 
        :default-sort = "{ prop: 'permsName', order: 'descending'}" 
        v-loading="dataListLoading" 
        :data="dataList" 
        row-key="permId" border 
        style="width: 100%; ">
        <el-table-column prop="permsName" header-align="center" sortable min-width="180" label="名称">
        </el-table-column>
        <el-table-column prop="icon" header-align="center" align="center" label="图标">
          <template slot-scope="scope">
            <svg class="icon-svg" aria-hidden="true">
              <use :xlink:href="`#${scope.row.icon}`"></use>
            </svg>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="orderNum" header-align="center" align="center" label="排序">
          </el-table-column> -->
        <el-table-column prop="bton" header-align="center" align="center" label="类型">
          <template slot-scope="scope">
            <el-tag v-if="(scope.row.bton === 0)" size="small">菜单</el-tag>
            <el-tag v-else-if="(scope.row.bton === 1)" size="small" type="info">按钮</el-tag>
          </template>
        </el-table-column>
    
        <el-table-column prop="path" header-align="center" align="center" width="150" :show-overflow-tooltip="true"
          label="路由">
        </el-table-column>
        <el-table-column prop="perms" header-align="center" align="center" width="150" :show-overflow-tooltip="true"
          label="授权标识">
        </el-table-column>
        <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.permId)">修改</el-button>
            <el-button type="text" size="small" @click="deleteHandle(scope.row.permId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </div>
  </el-card>
  
</template>

<script>
import AddOrUpdate from './menu-add-or-update'
import { treeDataTranslate } from '@/utils'
import servicesApi from '@/services/servicesApi'
  export default {
    data() {
      return {
        dataForm: {},               // 查询条件
        dataList: [],               // 数据列表
        order: '',                  // 排序，asc／desc
        orderField: '',             // 排序，字段
        page: 1,                    // 当前页码
        limit: 10,                  // 每页数
        total: 0,                   // 总条数
        dataListLoading: false,     // 数据列表，loading状态
        dataListSelections: [],     // 数据列表，多选项
        addOrUpdateVisible: false   // 新增／更新，弹窗visible状态
      }
    },
    components: {
      AddOrUpdate
    },
    created() {
      this.getDataList()
    },
    // activated () {
    //   this.getDataList()
    // },
    methods: {
      // 获取数据列表
      getDataList() {
        this.dataListLoading = true
        servicesApi.getMenuList().then(res => {
          // console.log(res.data)
          let code = res.data.code
          let data = res.data.data
          if (code === 200) {
            // this.dataList = treeDataTranslate(data, 'permId')
            this.dataList = data
          } else {
            this.dataList = []
          }
          this.dataListLoading = false
        })
        // this.$http({
        //   url: this.$http.adornUrl('/sys/menu/list'),
        //   method: 'get',
        //   params: this.$http.adornParams()
        // }).then(({data}) => {
        //   this.dataList = treeDataTranslate(data, 'permId')
        //   this.dataListLoading = false
        // })
      },
      // 排序
      dataListSortChangeHandle(data) {
        // if (!data.order || !data.prop) {
        //   this.order = ''
        //   this.orderField = ''
        //   return false
        // }
        // this.order = data.order.replace(/ending$/, '')
        // this.orderField = data.prop.replace(/([A-Z])/g, '_$1').toLowerCase()
        // this.getDataList()
      },
      // 新增 / 修改
      addOrUpdateHandle(id) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          // this.$refs.addOrUpdate.dataForm.id = id
          this.$refs.addOrUpdate.init(id)
        })
      },
      // 删除
      deleteHandle(id) {
        this.$confirm(`确定对[permId=${id}]进行[删除]操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          servicesApi.deleteMenu(id).then(res => {
            // console.log(res.data)
            let code = res.data.code
            let data = res.data.data
            if (code ===200) {
              this.$message({
                message: '删除成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getDataList()
                }
              })
            } else {
              this.$message.error(res.data.msg)
            }
          })
          // this.$http({
          //   url: this.$http.adornUrl(`/sys/menu/delete/${id}`),
          //   method: 'post',
          //   data: this.$http.adornData()
          // }).then(({data}) => {
          //   if (data && data.code === 0) {
          //     this.$message({
          //       message: '操作成功',
          //       type: 'success',
          //       duration: 1500,
          //       onClose: () => {
          //         this.getDataList()
          //       }
          //     })
          //   } else {
          //     this.$message.error(data.msg)
          //   }
          // })
        }).catch(() => {})
      }
    }
  }
</script>
